<template>
  <!--    在线看站-->
  <!--    在线看站-->
  <div class="top" >
    <div class="left"><i class="el-icon-arrow-left"></i></div>
    <div class="center"><p>“业火的向日葵”梵高画展</p></div>
    <div style="height: 200px;width: 100%;background-color: transparent">
      <!--        <img style="height: 200px;width: 100%;" src="./assets/img/3.jpg">-->
    </div>
    <!--      v-model="activeName" @tab-click="handleClick"-->
    <el-tabs
    :stretch="true">
      <el-tab-pane label="作者介绍" name="first" >
        <img src="../../../assets/img/1.jpg">
        <p>文森特·威廉·梵高（Vincent Willem van Gogh，1853年3月30日—1890年7月29日），荷兰后印象派画家。代表作有《星月夜》、自画像系列、向日葵系列等。
          梵高出生于1853年3月30日荷兰乡村津德尔特的一个新教牧师家庭，早年的他做过职员和商行经纪人，还当过矿区的传教士最后他投身于绘画。他早期画风写实，受到荷兰传统绘画及法国写实主义画派的影响。1886年，他来到巴黎，结识印象派和新印象派画家，并接触到日本浮世绘的作品，视野的扩展使其画风巨变。
          1888年，来到法国南部小镇阿尔，创作《阿尔的吊桥》；同年与画家保罗·高更交往，但由于二人性格的冲突和观念的分歧，合作很快便告失败。
          此后，梵高的疯病（有人记载是“癫痫病”）时常发作，但神志清醒时他仍然坚持作画。1889年创作《星月夜》。1890年7月，梵高在精神错乱中开枪自杀，年仅37岁。</p>
      </el-tab-pane>
      <el-tab-pane label="作品展示" name="second" >
        <div class="photo">
          <img src="../../../assets/img/1.jpg">
          <p>《星月夜》（The Starry Night）是荷兰后印象派画家文森特·梵·高于1889年在法国圣雷米的一家精神病院里创作的一幅油画，
            是梵高的代表作之一，现藏纽约现代艺术博物馆。</p>
        </div>
        <div class="photo">
          <img src="../../../assets/img/1.jpg">
          <p>《星月夜》（The Starry Night）是荷兰后印象派画家文森特·梵·高于1889年在法国圣雷米的一家精神病院里创作的一幅油画，
            是梵高的代表作之一，现藏纽约现代艺术博物馆。</p>
        </div>
        <div class="photo">
          <img src="../../../assets/img/1.jpg">
          <p>《星月夜》（The Starry Night）是荷兰后印象派画家文森特·梵·高于1889年在法国圣雷米的一家精神病院里创作的一幅油画，
            是梵高的代表作之一，现藏纽约现代艺术博物馆。</p>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>

</template>

<script>
    export default {
        name: "online-watch"
    }
</script>

<style scoped>
  .top{
    width: 100%;
    height: 325px;
    background-image: url('../../../assets/img/2.jpg');
    background-position: center center;
  }
  .left{
    display: inline-block;
    width: 60px;
    font-size: 25px;
    color: white;
    margin-left: 10px;
    background-color: transparent;
  }
  .center{
    display: inline-block;
    flex: 1;
    font-size: 20px;
    color: white;
    text-align: center;
    background-color: transparent;
  }

  .el-tabs__nav {
    white-space: nowrap;
    position: relative;
    width: 100%;
    transition: transform .3s,-webkit-transform .3s;
    float: left;
    z-index: 2;
  }
  .el-tabs__item {
    padding: 0 20px !important;
    height: 60px;
    /*width: 50%;*/
    flex: 1;
    text-align: center;
    margin-left: 50px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    line-height: 60px;
    display: inline-block;
    list-style: none;
    font-size: 20px;
    font-weight: 500;
    color: white;
    position: relative;
  }
  .el-tabs__active-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 2px;
    background-color: transparent !important;
    z-index: 1;
    list-style: none;
  }
  .el-tab-pane img{
    margin: 0 auto;
    margin-top: 20px;
    width: 380px;
    height: auto;
    border: 2px solid #d7d7d7;
    position: relative;
    left: 3%;
    top: 10%;
  }
  .el-tab-pane p{
    padding: 0px 30px 10px 30px;
    text-align: center;

  }

</style>
